<!--学生考试首页-->
<template>
  <div id="student">
    <el-row class="padding-50">
      <el-col :span="24">
        <ul class="list">
          <li class="logo">
           <!-- <i class="iconfont icon-kaoshi"></i> -->
           <span>Exam-Online</span></li>
            <img src="@/assets/logo/logo.png" alt="Logo" class="logos">
            <li><span></span></li>
            <li><a href="javascript:;" @click="toIndex">首页</a></li>
          <li><a href="javascript:;" @click="exam()">我的考试</a></li>
          <li><a href="javascript:;" @click="practice()">考前练习</a></li>
          <li><router-link to="/scoreTable">我的成绩</router-link></li>
          <li><router-link to="/message">留言板</router-link></li>
          <li><a href="javascript:;">待定</a></li>

          <!-- 右边部分 -->
            <li style="margin-left: 500px;">
            <!-- 切换主题 -->
          <div style="display: flex;flex-direction: column; align-items: center;margin-top: 10px;">
            <el-tooltip content="切换" effect="dark" placement="bottom">
              <div class="theme-toggle" @click="toggleTheme">
                <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
                <svg-icon v-else icon-class="moon" />
              </div>
            </el-tooltip>
              <a href="javascript:;" style="font-size: 12px;margin-top: -19px;">主题</a>
          </div>
            </li>

            <!-- 头像 -->
            <li>        
             <div class="user-info" @mouseleave="flag = false" @mouseenter="flag = true">
              <div style="display: flex;flex-direction: column; align-items: center;margin-top: -2px;">
              <img :src="userStore.avatar" class="user-avatar"  />
                <a href="javascript:;" style="font-size: 12px;margin-top: -16px;">{{user.userName}}</a>
                </div>
              <div class="user-menu" v-if="flag">
                <p @click="manage()">管理中心</p>
                <p class="exit" @click="logout">退出</p>
              </div>
              </div>
            </li>
        </ul>
      </el-col>
    </el-row>
    <!--路由区域-->
    <div class="main">
      <router-view></router-view>
    </div>
    <!-- <v-footer></v-footer> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
// import myFooter from '@/components/student/myFooter.vue'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
const userStore = useUserStore()


//样式
const settingsStore = useSettingsStore()

//用户

// 引入路由和 store
const router = useRouter()
// const store = useStore()

// 响应式状态
const flag = ref(false)  //控制用户信息下拉框
const user = ref({})     //当前用户登录信息

//主题设置
function toggleTheme() {
  settingsStore.toggleTheme()
}

// 跳转到登录页，并清除cookie
function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index'
    })
  }).catch(() => { })
}

//跳转到管理中心
const manage = () => {
  router.push({ path: '/manager' })
}

// 从 Cookie 中读取用户信息并赋值给 user
const userInfo = () => {
  user.value.userName = userStore.nickName
  user.value.studentId = userStore.id
}

//切换到练习或考试模式，并跳转到对应的页面
const practice = () => {
  router.push({ path: '/myExercise' })
}

const exam = () => {
  router.push({ path: '/myExam' })
}
const toIndex = () => {
  router.push({ path: '/student' })
}

// 生命周期
onMounted(() => {
  userInfo()
})
</script>

<style scoped>

/* 修改后的样式 */
.right .icon {
  margin-right: 6px;
}
#student .padding-50 {
  margin: 0 auto;
  padding: 0 50px;
  box-shadow: 0 0 10px 4px rgba(1,149,255,0.1);
  background-color: #fff;
}
.list a {
  text-decoration: none;
  color: #334046;
}
li {
  list-style: none;
  height: 60px;
  line-height: 60px;
}
#student .list{
  display: flex;
  align-items: center; /* 垂直居中 */
}
#student .list li {
  padding: 0 15px; /* 调整间距 */
  cursor: pointer;
}
#student .list li:hover {
  background-color: #0195ff;
  transition: all 0.3s ease; /* 加快过渡速度 */
}
#student .list li:hover a {
  color: #fff;
}

/* 右侧容器样式 */
#student .list .right {
  margin-left: auto;
  position: relative;
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 15px; /* 两个元素之间的间距 */
}

/* 主题切换按钮样式 */
.theme-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 用户信息样式 */
.user-info {
  position: relative;
}

/* 下拉菜单样式 */
.user-menu {
  text-align: center;
  position: absolute;
  top: 60px;
  right: 0; /* 右侧对齐 */
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  border-bottom: 3px solid #0195ff;
  background-color: #fff;
  z-index: 999;
  width: 120px; /* 增加宽度 */
}

.user-menu p {
  height: 40px;
  line-height: 40px;
  width: 100%;
  color: #000;
  padding: 0 10px;
  box-sizing: border-box;
}

.user-menu p:hover {
  background-color: #0195ff;
  color: #fff;
}

.right .icon {
  margin-right: 6px;
}
#student .padding-50 {
  margin: 0 auto;
  padding: 0 50px;
  box-shadow: 0 0 10px 4px rgba(1,149,255,0.1);
  background-color: #fff;
}
.list a {
  text-decoration: none;
  color: #334046;
}
li {
  list-style: none;
  height: 60px;
  line-height: 60px;
}
#student .list{
  display: flex;
}
#student .list li {
  padding: 0 20px;
  cursor: pointer;
}
#student .list li:hover {
  background-color: #0195ff;
  transition: all 2s ease;
}
#student .list li:hover a {
  color: #fff;
}
#student .list .right {
  margin-left: auto;
  position: relative;
}
#student .list li.right :hover a {
  color: #000;
}
#student .list .logo {
  display: flex;
  font-weight: bold;
  color: #2f6c9f;
}
#student .list .logo i {
  font-size: 50px;
}
.right .msg {
  text-align: center;
  position: absolute;
  top: 60px;
  left: 0px;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  border-bottom: 3px solid #0195ff;
  background-color: #fff;
  z-index:999;
}
.right .msg p {
  height: 40px;
  line-height: 40px;
  width: 105px;
  color: #000;
}
.right .msg p:hover {
  background-color: #0195ff;
}

.logos {

  width: 45px; /* 设置宽度 */
  height: 58px; /* 保持比例 */
  object-fit: contain;
  transition: filter 0.3s ease; /* 添加平滑的动画效果 */

}

.logo:hover .logos {
  filter: brightness(0.8); /* 图片随父级悬停变暗 */

}
.main{
  margin-top: -20px;
  background-color: #e2e2e2;
  min-height: 100vh;
  display: flex;
}

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }


</style>
